<template>
    <div class="set">
      <div>
        <h1 class="title">个人设置</h1>
        <!-- 显示了当前用户的手机号。这个手机号是从this.$store.state.usernumber中获取的。 -->
        <p>手机号:{{ this.$store.state.usernumber }}</p>
        <el-form-item>
          <el-input type="tel" v-model="usernumber" style="width: 200px;" />
        </el-form-item>
        <el-button type="primary" @click="update">点击修改</el-button>
      </div>
    </div>
  </template>
  <script>
  export default {
    //返回usernumber
    //定义usernumber 用于获取用户输入的手机号码  并绑定页面上的input标签v-model
    data() {
      return {
  
        usernumber: '',
      }
    },
    //update的方法
    methods: {
      update() {
        //更新后的电话号码提交或者替换到index.js中的usernumber，并显示在Profile中
        //把用户输入的新手机号(this.usernumber)更新到store index.js中，然后弹出一个提示框告诉用户修改成功。
        this.$store.state.usernumber = this.usernumber;
        alert('修改成功！');
      }
    }
  }
  </script>
  <style scoped>
  .set {
  
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .title {
    /* 设置标题的样式 */
    font-size: 24px;
    color: #333;
  }
  </style>
    
  
  
  